<template>
    <div v-if="getPostsRs.success" id="root" >
        <!--不显示分页 （无限滚动）必然不显示删除按钮 -->
        <div v-if="!showPartition"
                   class="infinite-list-wrapper"
                   style="overflow:auto; height: 2000px"
        >
            <div v-infinite-scroll="loadPosts"
                 infinite-scroll-distance="0"
                 :infinite-scroll-disabled="this.loading || (this.postList.length === this.totalRs)"
                 infinite-scroll-immediate="false"
            >
                <!--一篇帖子-->
                <div v-for="(post, index) in postList" :key="post.id" >
                    <!--不显示删除按钮 ui-->
                    <el-card class="box-card" shadow="hover">
                        <!--所属贴吧信息-->
                        <el-row type="flex" justify="end" >
                            <el-link type="info" :href="'/postBarIndex?barId=' + post.postBar.id" target="_blank">{{post.postBar.name}}</el-link>
                            <div class="margin_left_10">
                                <el-tag size="small"  v-for="(category, index) in post.postBar.categoryList" :key="category.id" :type="categoryType[index]">
                                    <a :href="'/ctg?ctgId=' + category.id" class="tag_a_link" target="_blank">{{category.name}}</a>
                                </el-tag>
                            </div>
                        </el-row>
                        <!--帖子标题   +  回复数   浏览数-->
                        <el-row class="post_title_row">
                            <el-col :span="15">
                                <el-link type="primary" v-on:click="queryPost(post.id, index)">{{post.title}}</el-link>
                            </el-col>
                            <el-col :span="2" style="" :offset="1">  <!--总回复数-->
                                <span><i class="el-icon-chat-round font_size_23 color_green"></i> {{post.totalReplyNum}}</span>
                            </el-col>
                            <el-col :span="2" class="margin_left_10">  <!--点赞数（只帖子）-->
                                <!--                                    <span><i class="el-icon-sugar font_size_23 color_orange"></i> {{post.sbcNum}}</span>-->
                                <span><i class="el-icon-sugar font_size_23 color_orange"></i> {{post.sbcNum}}</span>
                            </el-col>
                            <el-col :span="2" class="margin_left_10"> <!--浏览数-->
                                <span><i class="el-icon-view font_size_23"></i> {{post.viewNum}}</span>
                            </el-col>
                        </el-row>
                        <!-- 帖子纯内容 -->
                        <el-row>
                            <el-col :span="20">
                                <p class="over_show_point over_limit_line_3 font" v-text="post.pure_content"></p>
                            </el-col>
                        </el-row>
                        <!--帖子图片  （如果有的话） 最多3张-->
                        <el-row v-if="post.images !== 'noImg'">
                            <el-image
                                    v-for="img in post.images"
                                    :key="img"
                                    style="width: 100px; height: 100px; margin-right: 8px"
                                    :src="img"
                                    fit="scale-down"
                                    :preview-src-list="post.images"></el-image>
                        </el-row>
                        <!--发布人  +  发布时间-->
                        <el-row type="flex" justify="end" class="post_btn_info">
                            <el-col :span="3">
                                <span><i class="el-icon-user"></i><a href="#" @click="toMyIndex(post.user.uname)" class="my_a_link color_gray_info margin_left_10">{{post.user.nickName}}</a></span>
                            </el-col>
                            <el-col :span="4" >
                                <!--                                            <i class="el-icon-mobile-phone"></i><span class="color_gray_info margin_left_10" >7-7 10:46</span>-->
                                <i class="el-icon-mobile-phone"></i><span class="color_gray_info margin_left_10" >{{post.sdfTime}}</span>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-divider></el-divider>
                </div>
            </div>

<!--            <p v-if="loading" >加载中...</p>-->
            <!--loading 为 true 时 正常显示 标签中的内容-->
            <p v-loading="loading" element-loading-text="等一下就好了啦"></p>
            <!--v-if 里不能放 方法，即使这个方法返回的是 false等  可能是vue版本问题-->
<!--            <div v-if="noMore">-->
            <div v-if="this.postList.length === this.totalRs">
                <el-empty description="没有更多了.."></el-empty>
            </div>
        </div>

        <!-- 显示分页 -->
        <div v-else>
            <!--一篇帖子-->
<!--            <div  v-for="(post, index) in postList" :key="post.id" :id="'pid' + post.id">-->
            <div  v-for="(post, index) in postList" :key="post.id" >
                <!--显示删除按钮 ui-->
                <el-row :gutter="6" v-if="showDel">
                    <!--原帖子内容（不含删除按钮）-->
                    <el-col :span="23">
                        <el-card class="box-card" shadow="hover">
                            <!--所属贴吧信息-->
                            <el-row type="flex" justify="end" >
                                <el-link type="info" :href="'/postBarIndex?barId=' + post.postBar.id" target="_blank">{{post.postBar.name}}</el-link>
                                <div class="margin_left_10">
                                    <el-tag size="small"  v-for="(category, index) in post.postBar.categoryList" :key="category.id" :type="categoryType[index]">
                                        <a :href="'/ctg?ctgId=' + category.id" class="tag_a_link" target="_blank">{{category.name}}</a>
                                    </el-tag>
                                </div>
                            </el-row>
                            <!--帖子标题   +  回复数   浏览数-->
                            <el-row class="post_title_row">
                                <el-col :span="15">
                                    <el-link type="primary" v-on:click="queryPost(post.id, index)">{{post.title}}</el-link>
                                </el-col>
                                <el-col :span="2" style="" :offset="1">  <!--总回复数-->
                                    <span><i class="el-icon-chat-round font_size_23 color_green"></i> {{post.totalReplyNum}}</span>
                                </el-col>
                                <el-col :span="2" class="margin_left_10">  <!--点赞数（只帖子）-->
                                    <!--                                    <span><i class="el-icon-sugar font_size_23 color_orange"></i> {{post.sbcNum}}</span>-->
                                    <span><i class="el-icon-sugar font_size_23 color_orange"></i> {{post.sbcNum}}</span>
                                </el-col>
                                <el-col :span="2" class="margin_left_10"> <!--浏览数-->
                                    <span><i class="el-icon-view font_size_23"></i> {{post.viewNum}}</span>
                                </el-col>
                            </el-row>
                            <!-- 帖子纯内容 -->
                            <el-row>
                                <el-col :span="20">
                                    <p class="over_show_point over_limit_line_3 font" v-text="post.pure_content">
                                    </p>
                                </el-col>
                            </el-row>
                            <!--帖子图片  （如果有的话） 最多3张-->
                            <el-row v-if="post.images !== 'noImg'">
                                <el-image
                                        v-for="img in post.images"
                                        :key="img"
                                        style="width: 100px; height: 100px; margin-right: 8px"
                                        :src="img"
                                        fit="scale-down"
                                        :preview-src-list="post.images"></el-image>
                            </el-row>
                            <!--发布人  +  发布时间-->
                            <el-row type="flex" justify="end" class="post_btn_info">
                                <el-col :span="3">
                                    <span><i class="el-icon-user"></i><a href="#" @click="toMyIndex(post.user.uname)" class="my_a_link color_gray_info margin_left_10">{{post.user.nickName}}</a></span>
                                </el-col>
                                <el-col :span="4" >
                                    <!--                                            <i class="el-icon-mobile-phone"></i><span class="color_gray_info margin_left_10" >7-7 10:46</span>-->
                                    <i class="el-icon-mobile-phone"></i><span class="color_gray_info margin_left_10" >{{post.sdfTime}}</span>
                                </el-col>
                            </el-row>
                        </el-card>
                    </el-col>
                    <!--删除按钮-->
                    <el-col :span="1" class="del_button" >
                        <el-button size="medium" type="danger" icon="el-icon-delete" circle v-on:click="handleDel(index, post.id, post.user.uname)"></el-button>
                    </el-col>
                </el-row>
                <!--不显示删除按钮 ui-->
                <el-card class="box-card" shadow="hover" v-else>
                    <!--所属贴吧信息-->
                    <el-row type="flex" justify="end" >
                        <el-link type="info" :href="'/postBarIndex?barId=' + post.postBar.id" target="_blank">{{post.postBar.name}}</el-link>
                        <div class="margin_left_10">
                            <el-tag size="small"  v-for="(category, index) in post.postBar.categoryList" :key="category.id" :type="categoryType[index]">
                                <a :href="'/ctg?ctgId=' + category.id" class="tag_a_link" target="_blank">{{category.name}}</a>
                            </el-tag>
                        </div>
                    </el-row>
                    <!--帖子标题   +  回复数   浏览数-->
                    <el-row class="post_title_row">
                        <el-col :span="15">
                            <el-link type="primary" v-on:click="queryPost(post.id, index)">{{post.title}}</el-link>
                        </el-col>
                        <el-col :span="2" style="" :offset="1">  <!--总回复数-->
                            <span><i class="el-icon-chat-round font_size_23 color_green"></i> {{post.totalReplyNum}}</span>
                        </el-col>
                        <el-col :span="2" class="margin_left_10">  <!--点赞数（只帖子）-->
                            <!--                                    <span><i class="el-icon-sugar font_size_23 color_orange"></i> {{post.sbcNum}}</span>-->
                            <span><i class="el-icon-sugar font_size_23 color_orange"></i> {{post.sbcNum}}</span>
                        </el-col>
                        <el-col :span="2" class="margin_left_10"> <!--浏览数-->
                            <span><i class="el-icon-view font_size_23"></i> {{post.viewNum}}</span>
                        </el-col>
                    </el-row>
                    <!-- 帖子纯内容 -->
                    <el-row>
                        <el-col :span="20">
                            <p class="over_show_point over_limit_line_3 font" v-text="post.pure_content">
                                <!--                                        v-html="content"-->
                                <!--                                        {{content}}-->
                                <!--                                        可能你不快乐 可我要你快乐-->
                                <!--                                        可能是我的爱情他来的太晚了、-->
                                <!--                                        可我只想要对你说 我绝对不退出了-->

                                <!--                                        可能你不快乐 可惜你不快乐-->
                                <!--                                        可是我的爱情他来的太晚了-->
                                <!--                                        可他给了你写什么-->
                                <!--                                        你是不是要快了-->
                                <!--                                        你要听我的话 别再为他犯傻了-->
                                <!--                                        可能你不快乐 可我要你快乐-->
                                <!--                                        可能是我的爱情他来的太晚了-->
                                <!--                                        可我指向对你说 我绝对不退出了-->
                                <!--                                        可要你快乐是我的快乐-->

                                <!--                                        可能你不快乐 可惜你不快乐-->
                                <!--                                        可能是我的爱情他来的太晚了-->
                                <!--                                        可他给了你写什么 你是不是要快乐-->
                                <!--                                        可要听我的话 别再为他犯傻了-->
                                <!--                                        可能你不快乐 可我要你快乐-->
                                <!--                                        可是我的爱情他来的太晚了-->
                                <!--                                        可我指向对你说 我绝对不推出了-->
                                <!--                                        可要你快乐使我的快乐-->
                            </p>
                        </el-col>
                    </el-row>
                    <!--帖子图片  （如果有的话） 最多3张-->
                    <el-row v-if="post.images !== 'noImg'">
                        <el-image
                                v-for="img in post.images"
                                :key="img"
                                style="width: 100px; height: 100px; margin-right: 8px"
                                :src="img"
                                fit="scale-down"
                                :preview-src-list="post.images"></el-image>
                    </el-row>
                    <!--发布人  +  发布时间-->
                    <el-row type="flex" justify="end" class="post_btn_info">
                        <el-col :span="3">
                            <span><i class="el-icon-user"></i><a href="#" @click="toMyIndex(post.user.uname)" class="my_a_link color_gray_info margin_left_10">{{post.user.nickName}}</a></span>
                        </el-col>
                        <el-col :span="4" >
                            <!--                                            <i class="el-icon-mobile-phone"></i><span class="color_gray_info margin_left_10" >7-7 10:46</span>-->
                            <i class="el-icon-mobile-phone"></i><span class="color_gray_info margin_left_10" >{{post.sdfTime}}</span>
                        </el-col>
                    </el-row>
                </el-card>
                <el-divider></el-divider>
            </div>

            <!--如果获取的当前分页的结果数量没到默认分页大小  则显示没有更多-->
            <div v-if="currentSize < pageSize">
                <el-empty description="没有更多了.."></el-empty>
            </div>
            <!--分页-->
            <el-row class="margin_top_15 center">
                <el-col>
                    <el-pagination
                            @current-change="updateListWithPage"
                            :current-page.sync="currentPage"
                            :page-size="pageSize"
                            layout="total, prev, pager, next, jumper"
                            :total="totalRs">
                    </el-pagination>
                </el-col>
            </el-row>
        </div>

<!--        <el-card class="box-card" shadow="hover">-->
<!--            卡片内容啊-->
<!--        </el-card>-->
<!--        <el-divider></el-divider>-->

<!--        <el-card class="box-card" shadow="hover">-->
<!--            卡片内容-->
<!--        </el-card>-->
    </div>
    <div style="height: 200px" v-else>
        {{getPostsRs.msg}}
    </div>
</template>

<script>
    export default {
        name: "indexPostList",
        data(){
            return {
                // postImgPrefix: "http://localhost:8081/static/images/postImage/",   /*帖子图片 地址 前缀*/
                postImgPrefix: this.GLOBAL.serverBaseUrl + this.GLOBAL.postImg,   /*帖子图片 地址 前缀*/
                categoryType: ["default", "success", "danger"],  // 贴吧分类颜色
                // hotP:[], /*热门动态数据    （按照 帖子总回复数 查询）*/
                // newP:[], /*个人贴  数据    （按照时间查询）*/
                postList:[], /*帖子列表*/
                getPostsRs: {
                    success: true,  // 成功从后台获取到帖子列表信息
                    msg: '', //从后台获取  帖子列表信息失败时 携带的错误提示信息
                },
                getPostsListPrefix: "", // 获取 帖子 服务器列表地址
                showType: "view", //显示帖子的方式 -- view: 浏览最多；time:日期最新； reply:回复最多
                search: { // 搜索 do 表示是否搜索， word表示搜索关键字  sortType表示结果排序方式
                    do: false,
                    word: "",
                    sortType: ""
                },
                withinUser: { // 用户内 帖子列表
                    uname: null, // 用户名
                    listType: 1 // 0 普通帖子  1 收藏帖子  2 私密帖子
                },
                barId: 0,
                showDel: false, // 是否显示 删除按钮
                showPartition: true, // 是否显示 分页, 不显示分页则无限滚动
                loading: false, // 表示当前正在加载，用于无限滚动
                pageSize: 10,  // 页大小， 默认为 10
                currentPage: 1, //当前页，默认为 1
                currentSize: 0, // 当前list（无论是帖子还是贴吧什么）当前（分）页的数量，初始化为0
                totalRs: 0, // 搜索结果总的条目数

                // 用于防止 无限滚动滑动到底部 多次触发load 方法 多次加载列表。
                busy: false, //  默认为false，表示可以进入，原理有点类似于加锁
            }
        },
        // props: ["getPostsRs", "postList"],  // 接收原来v-bind 的参数
        created(){
            // console.log("进入created");
            // this.doGetPostList();  // 获取帖子列表
            // console.log("透明");
            // 先同步代码，后异步代码 ， 父 created-父beforeMounted-子beforeCreated-子created-子beforeMounted-子mounted-父mounted

        },
        mounted(){
            // let root = document.getElementById("root");
            // root.setAttribute("v-infinite-scroll", "load");
        },
        methods: {

            // 布尔型， true表示没有更多，停用无限滚动。

            disableScroll(){
                console.log("enter disable");
                return true;
                // return this.loading || this.noMore
            },

            noMore(){
                console.log(typeof this.postList.length + " --- " + typeof this.totalRs);
                console.log(this.postList.length + " --- " + this.totalRs);
                return this.postList.length === this.totalRs;
            },

            // 初始化后端请求地址并 获取帖子列表；
            updateListWithPage(index){
                this.doGetPostList(index, this.pageSize);  // 获取帖子列表 并回传结果总数给父组件
            },


            /*先父组件init（mounted）再 子组件 loadPosts(应该是updated -- 在mounted后面 那一段时间)
            （这个时候异步任务还没有执行 init中的doGetPostList利的异步方法还没有执行，
            长度不够默认执行加载方法（infinite-scroll-immediate默认为 true 表示立即执行加载方法） -- 这里新调的异步任务排到前面的异步任务后面）
            可以指定infinite-scroll-immediate="false"  来使不立即执行加载方法，等到init中的doGetPostList利的异步方法 加载后再进行长度判断 */
            /*同步任务先执行， 异步任务后按顺序执行*/
            // 测试无限滚动触发方法
            loadPosts(){
                // 通过类似于加锁的方式， 滑动到底部（短时间）即使多次触发load方法，也只允许第一次进行数据加载
                // 有点类似于治标不治本的意思，但总能用
                // 指定了:infinite-scroll-disabled="this.loading || (this.postList.length === this.totalRs) 这里的控制代码就不用了，主要是第一个变量 loading
                // 详细分析过程见笔记
                if (this.busy){
                    console.log("It is busy now.");
                    return;
                }
                console.log("loadPosts");
                this.busy = true;
                this.loading = true;

                /*没搞懂，一下每次滑到底部只执行一次load方法，一下每次滑到底部执行好几次load方法，是在没看懂，有可能是infinite-scroll-disabled 导致的*/
                // 越搞越糊涂，下面的注释也只是之前的猜想，目前每次滑到底部只会load一次，而且就算你在后端sleep几秒，增长这个请求的获取时间，
                // 他也是只调用一次load，而不是 像下面猜想的那样因为没有立马填充而被多次识别。
                /*
                直接调用的话，会因为你获取帖子列表的代码是异步任务（不会立马响应，追加帖子内容，扩充原容器大小）
                而导致短时间他一直识别（执行完了一遍load里的同步代码）你滑到了容器底部（实际上你已经调用过load方法了，但是由于是异步，加载需要点时间，容器数据并不会立马更新）
                然后导致多次调用load方法， 最后呈现的结果是 多次执行doGetPostList, 而不是预期中的只执行一次
                * */
                // 1s 后执行
                // setTimeout(() => {
                //     this.currentPage++;
                //     console.log("加载 page:" + this.currentPage);
                //     this.doGetPostList(this.currentPage, this.pageSize);
                // }, 1000);
                // }, 5000);

                this.currentPage++;
                console.log("加载 page:" + this.currentPage);
                this.doGetPostList(this.currentPage, this.pageSize);
            },

            // 跳转至用户个人主页
            toMyIndex(uname){
                console.log("点击进入个人主页。");
                let routeUrl = this.$router.resolve({
                    path: "/myIndex",
                    /*这样传递的参数  好像会在地址栏显示出来*/
                    query: {uname: uname},  //通过 query（params不行） 传参   在目标页面通过 this.$route.query.type 来接收参数
                });

                //在当前页打开
                window.open(routeUrl.href, "_self");
            },

            /*点击 删除帖子按钮触发*/
            handleDel(index, postId, uname){
                // 正式处处理删除
                this.$confirm('此操作将永久删除该帖子及其评论等信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // delete 和  get 都不支持 formdata传参，都支持 url 拼接
                    // this.$http.get(this.GLOBAL.serverBaseUrl + this.GLOBAL.postDel + "?uname=" + uname + "&postId="  + postId).then(req=>{
                    this.$http.delete(this.GLOBAL.serverBaseUrl + this.GLOBAL.postDel + "?uname=" + uname + "&postId="  + postId).then(req=>{
                        if (req.data !== ""){
                            if (req.data.result_code === 200){ /*添加成功   提示成功并刷新页面*/
                                // 由于携带参数，到中间页也要通过 windows.open 把参数传回来，那样消息提示框会立即消失。
                                // this.$router.push({name:'classifytmp', params:{fromMyIndex: 'fromMyIndex', uname: uname}});  // 这里需要把 uname 同时传递
                                this.$message({
                                    showClose: true,
                                    duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                    message: req.data.msg,
                                    type: 'success'
                                });
                                // 在当前页面直接修改 数组，省去页面跳转 从而可以使提示正常显示
                                // 在当前页面 直接修改postList，从数组中下标为index 的元素开始，删除 1 个元素。
                                this.postList.splice(index, 1);
                            }else {  /*删除失败*/
                                this.$message({
                                    showClose: true,
                                    duration: 5000, /*默认5秒后自动关闭， 用户也可手动关闭*/
                                    message: req.data.msg,
                                    type: 'error'
                                });
                            }
                        }
                    });
                }).catch(() => {

                });
            },

            setShowDel(showDel){
                this.showDel = showDel;
            },

            // 初始化显示形式并获取帖子列表，方法在组件被引用时被调用
            // js里可以有  方法参数的默认值  Java里没有（不过可以通过重载来实现，有点麻烦就是）
            // = "" 可以不写。实参形参按顺序一一对应，后面没有的直接是null  也可以写一个默认值
            // 由于传递给函数的参数是严格按照定义函数的顺序给每一个参数赋值的，
            // 如果只想给第二个参数赋值，则必须传递两个参数，否则实际上传递的值赋值给了第一个参数，并没有赋值给第二个参数。
            // 而且js里好像没有 函数重载

            /**
             * 参数：doPartition 是否显示分页
             *      type 排序依据, index 初始页码, pageSize 页大小, doSearch 是否搜索, searchWord = "" 搜索关键字,
             *      uname = null 用户帖子（uname）, listType = 0 用户帖子种类 012 普通收藏私密, barId = 0 贴吧帖子（barId）
             */
            init(doPartition, type, index, pageSize, doSearch, searchWord = "", uname = null, listType = 0, barId = 0){
                this.showPartition = doPartition;
                this.pageSize = pageSize;
                this.showType = type;
                this.search.do = doSearch;
                this.search.word = searchWord;
                this.withinUser.uname = uname;
                this.withinUser.listType = listType;
                this.barId = barId;

                // 根据是否要搜索确定  后端访问url（不包括传递的参数）
                // if (this.search.do){
                //     if (this.withinUser.uname != null){
                //         this.getPostsListPrefix = this.GLOBAL.serverBaseUrl + this.GLOBAL.postByUser;
                //     }else if (this.barId !== 0){
                //         this.getPostsListPrefix = this.GLOBAL.serverBaseUrl + this.GLOBAL.postByBar;
                //     }else{
                //         this.getPostsListPrefix = this.GLOBAL.serverBaseUrl + this.GLOBAL.postSearchByPage;
                //     }
                // }else { // 全局帖子列表 (首页  按照时间还是回复数排序显示  通过参数传递表示)
                //     this.getPostsListPrefix = this.GLOBAL.serverBaseUrl + this.GLOBAL.postListBySortType;
                // }

                if (this.withinUser.uname != null){  // 用户
                    this.getPostsListPrefix = this.GLOBAL.serverBaseUrl + this.GLOBAL.postByUser;
                }else if (this.barId !== 0){ // 贴吧
                    this.getPostsListPrefix = this.GLOBAL.serverBaseUrl + this.GLOBAL.postByBar;
                }else if (this.search.do){ // 全局搜索
                    this.getPostsListPrefix = this.GLOBAL.serverBaseUrl + this.GLOBAL.postSearchByPage;
                }else { // 全局帖子列表 (首页  按照时间还是回复数排序显示  通过参数传递表示)
                    this.getPostsListPrefix = this.GLOBAL.serverBaseUrl + this.GLOBAL.postListBySortType;
                }

                this.doGetPostList(index, pageSize);
                console.log("获取列表完毕！");
                // 初始化 总结果条数
                this.getTotalNum();
            },

            // listType 用户帖子种类 012 普通收藏私密
            initByUser(type, index, pageSize, doSearch, searchWord, uname, listType){
                // 默认显示分页
                this.init(true, type, index, pageSize, doSearch, searchWord, uname, listType, 0);
            },

            initByBar(type, index, pageSize, doSearch, searchWord, barId){
                // 默认不显示分页
                this.init(false, type, index, pageSize, doSearch, searchWord, null, 0, barId);
            },

            initByBarWithPage(type, index, pageSize, doSearch, searchWord, barId){
                // 显示分页
                this.init(true, type, index, pageSize, doSearch, searchWord, null, 0, barId);
            },

            // 更新排序方式 重新分页获取帖子列表(页码1  页大小10)
            updateListWithSort(sortType){
                this.showType = sortType;
                this.doGetPostList(1, this.pageSize);
            },

            // 访问 this.getPostsListPrefix 后端获取 符合条件的总记录数
            getTotalNum(){
                let getNumUrl = this.GLOBAL.serverBaseUrl + this.GLOBAL.postTotalNum;
                // if (this.search.do){
                //     getNumUrl += "?word=" + this.search.word;
                // }

                // 无论是否进行搜索 无论是否针对某个用户 先把参数传过去，在后端进行值的判断
                getNumUrl += "?word=" + this.search.word; // 默认为 “” 空字符串
                getNumUrl += "&uname=" + this.withinUser.uname; // 默认为 null， 后端接受到的是字符串 "null" length:4
                getNumUrl += "&listType=" + this.withinUser.listType; // 默认为 0
                if (this.barId !== 0){
                    getNumUrl += "&barId=" + this.barId; // 默认为 0
                }

                this.$http.get(getNumUrl).then(req=>{
                    // 将帖子总数回传给 父组件
                    // return req.data;
                    // 由于axios是异步的，所以这里不能直接把结果返回（也不是完全不可以，要两个return，详见笔记），通过触发自定义事件调用父组件方法来修改值
                    this.totalRs = req.data;
                    this.$emit('setTotal', req.data);
                });
                // return 100;
            },

            /*以新标签页的方式打开发帖界面*/
            /*pid 帖子的id  index  帖子在postList数组中对应元素的下标*/
            queryPost(pid, index){
                //向后端发送axios请求(异步，所以该请求会在下面的代码后执行，但其实并不影响) 将对应帖子的 浏览数++
                let formData = new FormData();
                formData.append("postId", pid);
                // this.$http.post("http://localhost:8081/post/addPostViewNum", formData).then(req=>{
                this.$http.post(this.GLOBAL.serverBaseUrl + this.GLOBAL.postAddViewNum, formData).then(req=>{
                    if (req.data !== ''){
                        switch (req.data.result_code) {
                            case 200: // 正常+1  则将对应帖子的 viewNum ++(前端)
                                /*
                                    触发在父组件中定义的事件 updateInfo 并传递参数  this.editUser
                                    emit： 放行 发出 发表
                                * */
                                // this.$emit('updatePostList', index);
                                this.updatePost(index);
                                break;
                            case 300:   // 数据库插入 受影响行数< 1
                            case 303:  // 数据库插入发生异常
                                this.$notify.error({
                                    title: '错误',
                                    message: req.data.msg,
                                    duration: 0,   /*出错则设置为不自动关闭*/
                                });
                                break;
                            default:
                                this.$notify.error({
                                    title: '错误',
                                    message: '未知错误！！！',
                                    duration: 0,   /*出错则设置为不自动关闭*/
                                });
                        }
                    }else {
                        this.$message.error('糟糕，服务器出事了。。');
                    }
                });

                let routeUrl = this.$router.resolve({
                    path: "/postInfo",
                    /*这样传递的参数  好像会在地址栏显示出来*/
                    query: {pid: pid},  //通过 query（params不行） 传参   在目标页面通过 this.$route.query.role 来接收参数
                });

                //以新标签页的方式打开
                window.open(routeUrl.href, "_blank");
            },

            /* 根据 data 中设定的 服务器获取帖子列表地址  像后台后去已有的帖子列表*/
            // 用 async 和  await 控制本方法同步，结果只是把本方法的执行变成同步，本方法中 axios请求后的代码 必须等前面请求结束后执行
            // 但是 方法a 直接 调用了本方法， 在方法a中，不会等 本方法执行完再执行 调用本方法语句下面的代码，会先执行本方法中await 前面的同步代码，再回方法a继续执行
            // 本方法中的异步代码以及 异步代码后的同步代码（由await控制） 放到最后按照先后顺序执行。
            async doGetPostList(index, pageSize){
                // console.log("进入 doGetPostList");
                // 更新 url 拼接 排序方式、分页 参数
                let getPostListUrl = this.getPostsListPrefix + "?sortType=" + this.showType;
                getPostListUrl += "&index=" + index + "&pageSize=" + pageSize;
                // 如果要搜索  再拼接搜索关键字
                getPostListUrl += (this.search.do ? ("&word="+this.search.word):"");
                if (this.withinUser.uname != null){
                    getPostListUrl += "&uname="+this.withinUser.uname;
                    getPostListUrl += "&listType="+this.withinUser.listType;
                }

                // console.log("doGetPostList  中部");
                getPostListUrl += ((this.barId !== 0) ? ("&barId="+this.barId):"");
                // console.log("url:  " + getPostListUrl);
                await this.$http.get(getPostListUrl).then(req =>{
                    if (req.data !== "") {
                        if (req.data.rs.result_code === 200) { /*查询成功   */
                            const postsList = req.data.list;

                            /*处理 帖子附带图片地址 + 时间格式化*/
                            for (let i = 0; i < postsList.length; i++){
                                let image = postsList[i].images;
                                if(image !== "noImg"){ // 如果有 图片的话
                                    image = image.split(" ");   //以空格分隔  拆分字符串
                                    for(let j = 0; j < image.length; j++){
                                        image[j] = this.postImgPrefix + image[j];
                                        // console.log("image[" + j + "]:" + image[j]);
                                    }
                                    postsList[i].images = image;  // 将划分后的  图片名称 构成的数组（object） 重新赋值
                                }

                                // console.log("后端传来：" + postsList[i].pbTime);
                                //注意：日期是 getDate()， getDay() 获取的是星期几(0~6)
                                let dateTime = new Date(postsList[i].pbTime);
                                // postsList[i].sdfTime = dateTime.getFullYear() + '-' + (dateTime.getMonth() + 1) + '-' + dateTime.getDate() + ' ' + dateTime.getHours() + ':' + dateTime.getMinutes();
                                postsList[i].sdfTime = (dateTime.getMonth() + 1) + '-'
                                    + dateTime.getDate() + ' ' + dateTime.getHours() + ':' + dateTime.getMinutes();
                            }
                            // 如果显示分页，则直接替换原来的 postList，
                            if (this.showPartition){
                                this.postList = postsList;
                            }else { // 如果不显示分页，则把获取到的下一页的postList 添加到当前 postList末尾
                                for (let i = 0; i < postsList.length; i++){
                                    this.postList.push(postsList[i]);
                                }
                                console.log("this.postList.length:" + this.postList.length);
                            }
                            // 用于在 当前页item条数 < pageSize时，返回数目给父组件，在父组件中显示“没有更多”，但是现在已经把这部分移动到当前 组件了。
                            // this.$emit("updCurrentSize", this.postList.length); // 触发自定义事件 将当前页大小回传给父组件
                            this.currentSize = postsList.length;

                            console.log("异步任务执行完");
                        } else {  /*查询失败*/
                            this.getPostsRs.success = false;
                            this.getPostsRs.msg = req.data.rs.msg;
                        }
                    } else {
                        this.getPostsRs.success = false;
                        this.getPostsRs.msg = '糟糕，服务器出事了。。';
                    }
                });

                // 如果将本方法 doGetPostList声明为 async 并 await axios请求，那么必须得等到请求结束后这里的代码才会执行
                // 否则（不用 async 和 await 控制） 这里的代码会先于 axios 异步请求执行。
                // console.log("await 下面");

                // 无论是否成功获取帖子列表 都要释放锁
                this.busy = false;
                this.loading = false;
            },




            // 分页获取 帖子列表 index 表示页码， pageSize表示每页大小
            // doGetPostListByPage(index, pageSize){
            //     this.$http.get(this.getPostsListPrefix).then(req =>{
            //         if (req.data !== "") {
            //             if (req.data.rs.result_code === 200) { /*查询成功   */
            //                 let postsList =  req.data.list;
            //
            //                 /*处理 帖子附带图片地址 + 时间格式化*/
            //                 for (let i = 0; i < postsList.length; i++){
            //                     let image = postsList[i].images;
            //                     if(image !== "noImg"){ // 如果有 图片的话
            //                         image = image.split(" ");   //以空格分隔  拆分字符串
            //                         for(let j = 0; j < image.length; j++){
            //                             image[j] = this.postImgPrefix + image[j];
            //                             // console.log("image[" + j + "]:" + image[j]);
            //                         }
            //                         postsList[i].images = image;  // 将划分后的  图片名称 构成的数组（object） 重新赋值
            //                     }
            //
            //                     // console.log("后端传来：" + postsList[i].pbTime);
            //                     //注意：日期是 getDate()， getDay() 获取的是星期几(0~6)
            //                     let dateTime = new Date(postsList[i].pbTime);
            //                     // postsList[i].sdfTime = dateTime.getFullYear() + '-' + (dateTime.getMonth() + 1) + '-' + dateTime.getDate() + ' ' + dateTime.getHours() + ':' + dateTime.getMinutes();
            //                     postsList[i].sdfTime = (dateTime.getMonth() + 1) + '-'
            //                         + dateTime.getDate() + ' ' + dateTime.getHours() + ':' + dateTime.getMinutes();
            //                 }
            //                 // this.hotP = postsList;
            //                 this.postList = postsList;
            //
            //                 // 将帖子总数回传给 父组件
            //                 this.$emit('setTotal', this.postList.length);
            //             } else {  /*查询失败*/
            //                 this.getPostsRs.success = false;
            //                 this.getPostsRs.msg = req.data.rs.msg;
            //             }
            //         } else {
            //             this.getPostsRs.success = false;
            //             this.getPostsRs.msg = '糟糕，服务器出事了。。';
            //         }
            //     });
            // },

            /*将postList 中 对应下标为 index 的帖子的  浏览数++*/
            updatePost(index){
                this.postList[index].viewNum++;
            },
        }
    }
</script>

<style scoped>

    /*每条帖子右边的删除按钮*/
    .del_button{
        position: absolute;
        bottom: 0;
        right: 0;
    }

    /*每篇帖子底部的 发布人 和  发布时间  信息所在行*/
    .post_btn_info{
        font-size: 14px;
        line-height: 100%;
        margin-top: 7px;
    }

    /*帖子标题所在row*/
    .post_title_row{
        margin-top: 10px;
    }
</style>